<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>收到的礼物 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      min-height: 100vh;
      margin: 0;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    .nav-btn.primary {
      color: #e91e63;
    }
    
    /* 礼物统计 */
    .gift-stats {
      background: linear-gradient(135deg, #e91e63, #c2185b);
      color: white;
      padding: 15px;
      text-align: center;
    }
    
    .stats-total {
      font-size: 28px;
      font-weight: 700;
      margin: 5px 0;
    }
    
    .stats-label {
      font-size: 14px;
      opacity: 0.9;
    }
    
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 10px;
      gap: 5px;
    }
    
    .stat-item {
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      padding: 8px 0;
    }
    
    .stat-item-value {
      font-size: 16px;
      font-weight: 600;
    }
    
    .stat-item-label {
      font-size: 12px;
      opacity: 0.9;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #e91e63;
      color: white;
    }
    
    /* 通用礼物页面样式 */
    .gift-page {
      display: none;
    }
    
    .gift-page.active {
      display: block;
    }
    
    /* 筛选栏 */
    .filter-bar {
      display: flex;
      padding: 10px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
      gap: 10px;
    }
    
    .filter-item {
      flex: 1;
      padding: 6px 0;
      text-align: center;
      font-size: 14px;
      position: relative;
    }
    
    .filter-item::after {
      content: "\f078";
      font-family: "FontAwesome";
      font-size: 12px;
      margin-left: 5px;
      color: #999;
    }
    
    /* 礼物类型标签 */
    .gift-tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
    }
    
    .tag-popular {
      background-color: #ffebee;
      color: #c62828;
    }
    
    .tag-rare {
      background-color: #e8f5e9;
      color: #2e7d32;
    }
    
    .tag-digital {
      background-color: #e3f2fd;
      color: #0d47a1;
    }
    
    .tag-physical {
      background-color: #fff8e1;
      color: #ff8f00;
    }
    
    /* 操作按钮 */
    .action-btn {
      background: none;
      border: none;
      color: #666;
      font-size: 14px;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .action-btn:hover {
      background-color: #f5f7fa;
    }
    
    .action-btn.thank {
      color: #e91e63;
    }
    
    .action-btn.view {
      color: #3b82f6;
    }
    
    .action-btn.share {
      color: #10b981;
    }
    
    /* 样式1 - 卡片视图 */
    .card-view {
      padding: 15px;
    }
    
    .gift-card {
      background-color: white;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      border: 1px solid #eee;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .gift-header {
      display: flex;
      margin-bottom: 12px;
    }
    
    .gifter-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
      border: 2px solid #fce4ec;
    }
    
    .gifter-info {
      flex: 1;
    }
    
    .gifter-name {
      font-weight: 600;
      font-size: 16px;
      margin: 0 0 3px 0;
    }
    
    .gift-time {
      font-size: 12px;
      color: #999;
    }
    
    .gift-content {
      display: flex;
      margin-bottom: 12px;
    }
    
    .gift-image {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      object-fit: cover;
      margin-right: 12px;
      background-color: #fce4ec;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #e91e63;
    }
    
    .gift-details {
      flex: 1;
    }
    
    .gift-name {
      font-weight: 500;
      font-size: 15px;
      margin: 0 0 5px 0;
    }
    
    .gift-message {
      font-size: 13px;
      color: #666;
      line-height: 1.4;
      background-color: #f9f9f9;
      padding: 8px 10px;
      border-radius: 6px;
      margin: 0;
    }
    
    .gift-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      border-top: 1px solid #f5f7fa;
      padding-top: 10px;
    }
    
    /* 样式2 - 列表视图 */
    .list-view {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .gift-list-item {
      background-color: white;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
    }
    
    .list-gift-image {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      object-fit: cover;
      margin-right: 12px;
      background-color: #fce4ec;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #e91e63;
    }
    
    .list-gift-info {
      flex: 1;
      min-width: 0;
    }
    
    .list-gift-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 3px;
    }
    
    .list-gifter-name {
      font-weight: 500;
      font-size: 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .list-gift-time {
      font-size: 12px;
      color: #999;
      white-space: nowrap;
    }
    
    .list-gift-name {
      font-size: 13px;
      color: #333;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .list-gift-tags {
      display: flex;
      gap: 5px;
    }
    
    .list-gift-actions {
      display: flex;
      gap: 8px;
    }
    
    /* 样式3 - 时间线视图 */
    .timeline-view {
      position: relative;
      padding: 15px 15px 15px 35px;
    }
    
    .timeline-view::before {
      content: '';
      position: absolute;
      left: 18px;
      top: 0;
      bottom: 0;
      width: 2px;
      background-color: #eee;
    }
    
    .timeline-date {
      font-size: 14px;
      color: #999;
      margin: 0 0 15px 0;
      position: relative;
    }
    
    .timeline-date::before {
      content: '';
      position: absolute;
      left: -25px;
      top: 50%;
      transform: translateY(-50%);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #f5f7fa;
      border: 2px solid #eee;
    }
    
    .timeline-item {
      background-color: white;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 15px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      position: relative;
    }
    
    .timeline-item::before {
      content: '';
      position: absolute;
      left: -28px;
      top: 18px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #e91e63;
      border: 3px solid white;
    }
    
    .timeline-gift {
      display: flex;
    }
    
    .timeline-gift-image {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      object-fit: cover;
      margin-right: 10px;
      background-color: #fce4ec;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #e91e63;
    }
    
    .timeline-gift-details {
      flex: 1;
    }
    
    .timeline-gifter {
      font-weight: 500;
      font-size: 14px;
      margin: 0 0 3px 0;
    }
    
    .timeline-gift-name {
      font-size: 13px;
      color: #666;
      margin: 0 0 3px 0;
    }
    
    .timeline-gift-actions {
      display: flex;
      gap: 8px;
      margin-top: 5px;
    }
    
    .timeline-gift-actions .action-btn {
      font-size: 12px;
      padding: 2px 6px;
    }
    
    /* 样式4 - 图集视图 */
    .gallery-view {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 10px;
    }
    
    .gallery-item {
      position: relative;
      aspect-ratio: 1/1;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .gallery-gift-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background-color: #fce4ec;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      color: #e91e63;
    }
    
    .gallery-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0,0,0,0.7));
      color: white;
      padding: 8px;
      font-size: 12px;
    }
    
    .gallery-gifter {
      font-weight: 500;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .gallery-gift-name {
      font-size: 11px;
      opacity: 0.9;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .gallery-date {
      position: absolute;
      top: 5px;
      right: 5px;
      background-color: rgba(0,0,0,0.5);
      color: white;
      font-size: 10px;
      padding: 2px 5px;
      border-radius: 4px;
    }
    
    /* 批量操作按钮 */
    .batch-actions {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 90;
    }
    
    .batch-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background-color: #e91e63;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3);
      text-decoration: none;
      border: none;
    }
    
    /* 空状态 */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      color: #f8bbd0;
    }
    
    .empty-text {
      font-size: 16px;
      margin: 0 0 10px 0;
    }
    
    .empty-subtext {
      font-size: 14px;
      color: #94a3b8;
      margin: 0 0 20px 0;
    }
    
    .empty-btn {
      padding: 8px 16px;
      background-color: #e91e63;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 批量操作按钮 -->
  <div class="batch-actions">
    <button class="batch-btn" id="thankAllBtn">
      <i class="fa fa-heart"></i>
    </button>
  </div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">收到的礼物</h1>
    <a href="#" class="nav-btn primary" id="settingsBtn">
      <i class="fa fa-cog"></i>
    </a>
  </nav>
  
  <!-- 礼物统计 -->
  <div class="gift-stats">
    <div class="stats-total">28</div>
    <div class="stats-label">累计收到礼物总数</div>
    <div class="stats-grid">
      <div class="stat-item">
        <div class="stat-item-value">15</div>
        <div class="stat-item-label">未感谢</div>
      </div>
      <div class="stat-item">
        <div class="stat-item-value">8</div>
        <div class="stat-item-label">热门礼物</div>
      </div>
      <div class="stat-item">
        <div class="stat-item-value">3</div>
        <div class="stat-item-label">稀有礼物</div>
      </div>
    </div>
  </div>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="card">卡片视图</div>
      <div class="style-tab" data-style="list">列表视图</div>
      <div class="style-tab" data-style="timeline">时间线</div>
      <div class="style-tab" data-style="gallery">图集视图</div>
    </div>
  </div>
  
  <!-- 筛选栏 -->
  <div class="filter-bar">
    <div class="filter-item">全部礼物</div>
    <div class="filter-item">按类型</div>
    <div class="filter-item">未感谢</div>
  </div>
  
  <!-- 样式1 - 卡片视图 -->
  <div class="gift-page active" id="card">
    <div class="card-view">
      <div class="gift-card">
        <div class="gift-header">
          <img src="https://picsum.photos/seed/user1/100/100" alt="赠送者头像" class="gifter-avatar">
          <div class="gifter-info">
            <p class="gifter-name">李小明</p>
            <div class="gift-time">今天 14:30</div>
          </div>
        </div>
        <div class="gift-content">
          <div class="gift-image">
            <i class="fa fa-gift"></i>
          </div>
          <div class="gift-details">
            <p class="gift-name">
              浪漫玫瑰花束
              <span class="gift-tag tag-popular">热门</span>
            </p>
            <p class="gift-message">"祝你生日快乐，永远开心！"</p>
          </div>
        </div>
        <div class="gift-footer">
          <button class="action-btn thank"><i class="fa fa-heart"></i> 感谢</button>
          <button class="action-btn view"><i class="fa fa-eye"></i> 查看</button>
          <button class="action-btn share"><i class="fa fa-share-alt"></i> 分享</button>
        </div>
      </div>
      
      <div class="gift-card">
        <div class="gift-header">
          <img src="https://picsum.photos/seed/user2/100/100" alt="赠送者头像" class="gifter-avatar">
          <div class="gifter-info">
            <p class="gifter-name">王小花</p>
            <div class="gift-time">昨天 20:15</div>
          </div>
        </div>
        <div class="gift-content">
          <div class="gift-image">
            <i class="fa fa-diamond"></i>
          </div>
          <div class="gift-details">
            <p class="gift-name">
              水晶音乐盒
              <span class="gift-tag tag-rare">稀有</span>
            </p>
            <p class="gift-message">"恭喜你获得比赛冠军，这是给你的奖励！"</p>
          </div>
        </div>
        <div class="gift-footer">
          <button class="action-btn thank"><i class="fa fa-heart"></i> 感谢</button>
          <button class="action-btn view"><i class="fa fa-eye"></i> 查看</button>
          <button class="action-btn share"><i class="fa fa-share-alt"></i> 分享</button>
        </div>
      </div>
      
      <div class="gift-card">
        <div class="gift-header">
          <img src="https://picsum.photos/seed/user3/100/100" alt="赠送者头像" class="gifter-avatar">
          <div class="gifter-info">
            <p class="gifter-name">张伟</p>
            <div class="gift-time">3天前</div>
          </div>
        </div>
        <div class="gift-content">
          <div class="gift-image">
            <i class="fa fa-music"></i>
          </div>
          <div class="gift-details">
            <p class="gift-name">
              数字音乐会员
              <span class="gift-tag tag-digital">虚拟</span>
            </p>
            <p class="gift-message">"听说你喜欢听歌，希望你能喜欢这份礼物"</p>
          </div>
        </div>
        <div class="gift-footer">
          <button class="action-btn thank" disabled style="opacity: 0.5;"><i class="fa fa-check"></i> 已感谢</button>
          <button class="action-btn view"><i class="fa fa-eye"></i> 查看</button>
          <button class="action-btn share"><i class="fa fa-share-alt"></i> 分享</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式2 - 列表视图 -->
  <div class="gift-page" id="list">
    <ul class="list-view">
      <li class="gift-list-item">
        <div class="list-gift-image">
          <i class="fa fa-gift"></i>
        </div>
        <div class="list-gift-info">
          <div class="list-gift-header">
            <span class="list-gifter-name">李小明</span>
            <span class="list-gift-time">今天 14:30</span>
          </div>
          <div class="list-gift-name">浪漫玫瑰花束</div>
          <div class="list-gift-tags">
            <span class="gift-tag tag-popular">热门</span>
          </div>
        </div>
        <div class="list-gift-actions">
          <button class="action-btn thank"><i class="fa fa-heart"></i></button>
          <button class="action-btn view"><i class="fa fa-eye"></i></button>
        </div>
      </li>
      
      <li class="gift-list-item">
        <div class="list-gift-image">
          <i class="fa fa-diamond"></i>
        </div>
        <div class="list-gift-info">
          <div class="list-gift-header">
            <span class="list-gifter-name">王小花</span>
            <span class="list-gift-time">昨天 20:15</span>
          </div>
          <div class="list-gift-name">水晶音乐盒</div>
          <div class="list-gift-tags">
            <span class="gift-tag tag-rare">稀有</span>
          </div>
        </div>
        <div class="list-gift-actions">
          <button class="action-btn thank"><i class="fa fa-heart"></i></button>
          <button class="action-btn view"><i class="fa fa-eye"></i></button>
        </div>
      </li>
      
      <li class="gift-list-item">
        <div class="list-gift-image">
          <i class="fa fa-music"></i>
        </div>
        <div class="list-gift-info">
          <div class="list-gift-header">
            <span class="list-gifter-name">张伟</span>
            <span class="list-gift-time">3天前</span>
          </div>
          <div class="list-gift-name">数字音乐会员</div>
          <div class="list-gift-tags">
            <span class="gift-tag tag-digital">虚拟</span>
          </div>
        </div>
        <div class="list-gift-actions">
          <button class="action-btn thank" disabled style="opacity: 0.5;"><i class="fa fa-check"></i></button>
          <button class="action-btn view"><i class="fa fa-eye"></i></button>
        </div>
      </li>
      
      <li class="gift-list-item">
        <div class="list-gift-image">
          <i class="fa fa-book"></i>
        </div>
        <div class="list-gift-info">
          <div class="list-gift-header">
            <span class="list-gifter-name">刘芳</span>
            <span class="list-gift-time">1周前</span>
          </div>
          <div class="list-gift-name">精选散文合集</div>
          <div class="list-gift-tags">
            <span class="gift-tag tag-physical">实物</span>
          </div>
        </div>
        <div class="list-gift-actions">
          <button class="action-btn thank" disabled style="opacity: 0.5;"><i class="fa fa-check"></i></button>
          <button class="action-btn view"><i class="fa fa-eye"></i></button>
        </div>
      </li>
    </ul>
  </div>
  
  <!-- 样式3 - 时间线视图 -->
  <div class="gift-page" id="timeline">
    <div class="timeline-view">
      <h3 class="timeline-date">今天</h3>
      
      <div class="timeline-item">
        <div class="timeline-gift">
          <div class="timeline-gift-image">
            <i class="fa fa-gift"></i>
          </div>
          <div class="timeline-gift-details">
            <p class="timeline-gifter">李小明 赠送</p>
            <p class="timeline-gift-name">浪漫玫瑰花束 <span class="gift-tag tag-popular">热门</span></p>
            <div class="timeline-gift-actions">
              <button class="action-btn thank"><i class="fa fa-heart"></i> 感谢</button>
              <button class="action-btn view"><i class="fa fa-eye"></i> 查看</button>
            </div>
          </div>
        </div>
      </div>
      
      <h3 class="timeline-date">昨天</h3>
      
      <div class="timeline-item">
        <div class="timeline-gift">
          <div class="timeline-gift-image">
            <i class="fa fa-diamond"></i>
          </div>
          <div class="timeline-gift-details">
            <p class="timeline-gifter">王小花 赠送</p>
            <p class="timeline-gift-name">水晶音乐盒 <span class="gift-tag tag-rare">稀有</span></p>
            <div class="timeline-gift-actions">
              <button class="action-btn thank"><i class="fa fa-heart"></i> 感谢</button>
              <button class="action-btn view"><i class="fa fa-eye"></i> 查看</button>
            </div>
          </div>
        </div>
      </div>
      
      <h3 class="timeline-date">3天前</h3>
      
      <div class="timeline-item">
        <div class="timeline-gift">
          <div class="timeline-gift-image">
            <i class="fa fa-music"></i>
          </div>
          <div class="timeline-gift-details">
            <p class="timeline-gifter">张伟 赠送</p>
            <p class="timeline-gift-name">数字音乐会员 <span class="gift-tag tag-digital">虚拟</span></p>
            <div class="timeline-gift-actions">
              <button class="action-btn thank" disabled style="opacity: 0.5;"><i class="fa fa-check"></i> 已感谢</button>
              <button class="action-btn view"><i class="fa fa-eye"></i> 查看</button>
            </div>
          </div>
        </div>
      </div>
      
      <h3 class="timeline-date">1周前</h3>
      
      <div class="timeline-item">
        <div class="timeline-gift">
          <div class="timeline-gift-image">
            <i class="fa fa-book"></i>
          </div>
          <div class="timeline-gift-details">
            <p class="timeline-gifter">刘芳 赠送</p>
            <p class="timeline-gift-name">精选散文合集 <span class="gift-tag tag-physical">实物</span></p>
            <div class="timeline-gift-actions">
              <button class="action-btn thank" disabled style="opacity: 0.5;"><i class="fa fa-check"></i> 已感谢</button>
              <button class="action-btn view"><i class="fa fa-eye"></i> 查看</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式4 - 图集视图 -->
  <div class="gift-page" id="gallery">
    <div class="gallery-view">
      <div class="gallery-item">
        <div class="gallery-gift-image">
          <i class="fa fa-gift"></i>
        </div>
        <div class="gallery-overlay">
          <div class="gallery-gifter">李小明</div>
          <div class="gallery-gift-name">浪漫玫瑰花束</div>
        </div>
        <div class="gallery-date">今天</div>
      </div>
      
      <div class="gallery-item">
        <div class="gallery-gift-image">
          <i class="fa fa-diamond"></i>
        </div>
        <div class="gallery-overlay">
          <div class="gallery-gifter">王小花</div>
          <div class="gallery-gift-name">水晶音乐盒</div>
        </div>
        <div class="gallery-date">昨天</div>
      </div>
      
      <div class="gallery-item">
        <div class="gallery-gift-image">
          <i class="fa fa-music"></i>
        </div>
        <div class="gallery-overlay">
          <div class="gallery-gifter">张伟</div>
          <div class="gallery-gift-name">数字音乐会员</div>
        </div>
        <div class="gallery-date">3天前</div>
      </div>
      
      <div class="gallery-item">
        <div class="gallery-gift-image">
          <i class="fa fa-book"></i>
        </div>
        <div class="gallery-overlay">
          <div class="gallery-gifter">刘芳</div>
          <div class="gallery-gift-name">精选散文合集</div>
        </div>
        <div class="gallery-date">1周前</div>
      </div>
      
      <div class="gallery-item">
        <div class="gallery-gift-image">
          <i class="fa fa-coffee"></i>
        </div>
        <div class="gallery-overlay">
          <div class="gallery-gifter">赵强</div>
          <div class="gallery-gift-name">星巴克咖啡券</div>
        </div>
        <div class="gallery-date">2周前</div>
      </div>
      
      <div class="gallery-item">
        <div class="gallery-gift-image">
          <i class="fa fa-gamepad"></i>
        </div>
        <div class="gallery-overlay">
          <div class="gallery-gifter">孙文</div>
          <div class="gallery-gift-name">游戏充值卡</div>
        </div>
        <div class="gallery-date">2周前</div>
      </div>
      
      <div class="gallery-item">
        <div class="gallery-gift-image">
          <i class="fa fa-film"></i>
        </div>
        <div class="gallery-overlay">
          <div class="gallery-gifter">周敏</div>
          <div class="gallery-gift-name">电影票两张</div>
        </div>
        <div class="gallery-date">3周前</div>
      </div>
      
      <div class="gallery-item">
        <div class="gallery-gift-image">
          <i class="fa fa-shopping-bag"></i>
        </div>
        <div class="gallery-overlay">
          <div class="gallery-gifter">吴佳</div>
          <div class="gallery-gift-name">品牌购物卡</div>
        </div>
        <div class="gallery-date">1个月前</div>
      </div>
      
      <div class="gallery-item">
        <div class="gallery-gift-image">
          <i class="fa fa-paint-brush"></i>
        </div>
        <div class="gallery-overlay">
          <div class="gallery-gifter">郑华</div>
          <div class="gallery-gift-name">手绘艺术画</div>
        </div>
        <div class="gallery-date">1个月前</div>
      </div>
    </div>
  </div>
  
  <!-- 空状态示例 (默认隐藏) -->
  <div class="empty-state" style="display: none;">
    <div class="empty-icon">
      <i class="fa fa-gift"></i>
    </div>
    <h3 class="empty-text">暂无收到的礼物</h3>
    <p class="empty-subtext">好友可以在你的动态或直播间给你赠送礼物</p>
    <button class="empty-btn">邀请好友</button>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const giftPages = document.querySelectorAll('.gift-page');
    const filterItems = document.querySelectorAll('.filter-item');
    const actionBtns = document.querySelectorAll('.action-btn');
    const backBtn = document.getElementById('backBtn');
    const settingsBtn = document.getElementById('settingsBtn');
    const thankAllBtn = document.getElementById('thankAllBtn');
    const toast = document.getElementById('toast');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        giftPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 筛选项点击事件
    filterItems.forEach(item => {
      item.addEventListener('click', function() {
        showToast(`筛选：${this.textContent}`);
        // 实际应用中可打开筛选弹窗
      });
    });
    
    // 操作按钮点击事件
    actionBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        let action;
        if (this.classList.contains('thank')) action = '感谢';
        else if (this.classList.contains('view')) action = '查看';
        else if (this.classList.contains('share')) action = '分享';
        
        // 获取礼物相关信息
        let gifterName, giftName;
        
        if (this.closest('.gift-card')) {
          gifterName = this.closest('.gift-card').querySelector('.gifter-name').textContent;
          giftName = this.closest('.gift-card').querySelector('.gift-name').textContent.split('<')[0];
        } else if (this.closest('.gift-list-item')) {
          gifterName = this.closest('.gift-list-item').querySelector('.list-gifter-name').textContent;
          giftName = this.closest('.gift-list-item').querySelector('.list-gift-name').textContent;
        } else if (this.closest('.timeline-item')) {
          gifterName = this.closest('.timeline-item').querySelector('.timeline-gifter').textContent.split(' ')[0];
          giftName = this.closest('.timeline-item').querySelector('.timeline-gift-name').textContent.split(' ')[0];
        }
        
        if (action === '感谢') {
          showToast(`已感谢${gifterName}的礼物`);
          this.disabled = true;
          this.innerHTML = '<i class="fa fa-check"></i> 已感谢';
          this.style.opacity = '0.5';
        } else if (action === '查看') {
          showToast(`查看${gifterName}赠送的${giftName}`);
        } else if (action === '分享') {
          showToast(`分享${gifterName}赠送的${giftName}`);
        }
      });
    });
    
    // 图集项点击事件
    const galleryItems = document.querySelectorAll('.gallery-item');
    galleryItems.forEach(item => {
      item.addEventListener('click', function() {
        const gifterName = this.querySelector('.gallery-gifter').textContent;
        const giftName = this.querySelector('.gallery-gift-name').textContent;
        showToast(`查看${gifterName}赠送的${giftName}`);
      });
    });
    
    // 一键感谢按钮
    thankAllBtn.addEventListener('click', function() {
      if (confirm('确定要感谢所有未感谢的礼物吗？')) {
        showToast('已感谢所有未感谢的礼物');
        const thankBtns = document.querySelectorAll('.action-btn.thank:not(:disabled)');
        thankBtns.forEach(btn => {
          btn.disabled = true;
          btn.innerHTML = '<i class="fa fa-check"></i> 已感谢';
          btn.style.opacity = '0.5';
        });
      }
    });
    
    // 返回按钮点击事件
    backBtn.addEventListener('click', function() {
      showToast('返回个人主页');
      // 实际应用中可以使用history.back()
    });
    
    // 设置按钮点击事件
    settingsBtn.addEventListener('click', function() {
      showToast('礼物设置');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
  </script>
</body>
</html>
